<template>
  <div class="myCustomer">
    <SearchCriteria ref="child" @sendMessage="getMessage" :isMyCus="true"></SearchCriteria>
    <div class="main">
      <div class="top">
        <div>
          <el-button @click="importVisible = true" type="info" v-hasPermi="['myCustomer:import']">
            <svg-icon iconClass="uploadd" class="daoru"></svg-icon>
            名单导入
          </el-button>
          <el-button @click="openReassignment" :disabled="isAssignDisable" v-hasPermi="['myCustomer:reassign']">转派
          </el-button>
        </div>
        <el-button type="primary" @click="dialogCreatedVisible = true" v-hasPermi="['myCustomer:add']" :show-close="false" :close-on-click-modal="false">
          <svg-icon iconClass="addw"></svg-icon>
          新建客户
        </el-button>
      </div>
      <el-table :data="tableData" style="width: 100%" height="550" @selection-change="handleSelectionChange"
        ref="mainTable" v-loading="loadingrefresh">
        <el-table-column type="selection" width="45" align="center" fixed>
        </el-table-column>
        <el-table-column type="index" label="序号" width="50" fixed align="center"></el-table-column>
        <el-table-column prop="sid" label="客户号" align="center" :min-width="200" fixed="left"></el-table-column>
        <el-table-column prop="name" label="姓名" align="center" :min-width="100" fixed>
          <template slot-scope="scope">
            {{ scope.row.name || "-" }}
          </template>
        </el-table-column>
        <el-table-column prop="customerWay" label="获客来源" align="center" :min-width="200" fixed="left">
          <template slot-scope="scope">
            {{ scope.row.customerWay || '-' }}
          </template>
        </el-table-column>
        <div v-for="(item, i) in tableList" :key="i">
          <el-table-column width="100" :prop="item.prop" :label="item.label" align="center" v-if="item.label == '分配状态'">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.distributionState === '已分配'">已分配</el-tag>
              <el-tag type="warning" v-if="scope.row.distributionState === '待分配'">待分配</el-tag>
            </template>
          </el-table-column>
          <el-table-column width="120" :prop="item.prop" :label="item.label" align="center"
            v-else-if="item.label == '企微添加状态'">
            <template slot-scope="scope">
              <span class="wecomAdd1" v-if="scope.row.wecomAddState === '已添加'">已添加</span>
              <span class="wecomAdd2" v-if="scope.row.wecomAddState === '待添加'">待添加</span>
              <span class="wecomAdd3" v-if="scope.row.wecomAddState === '已删除'">已删除</span>
            </template>
          </el-table-column>
          <el-table-column width="120" :prop="item.prop" :label="item.label" align="center"
            v-else-if="item.label == '客户标签'">
            <template slot-scope="scope">
              <template slot-scope="scope">
                <el-popover placement="top" trigger="hover" v-if="scope.row.tagNames && scope.row.remark.tagNames > 2">
                  <template>
                    <el-tag v-for="(tag, index) in scope.row.tagNames" :key="index" class="tagInfo">{{ tag }}</el-tag>
                  </template>
                  <div slot="reference" class="set-content">
                    <el-tag v-for="(tag, index) in scope.row.tagNames" :key="index" class="tagInfo">{{ tag }}</el-tag>
                  </div>
                </el-popover>
                <div v-else>
                  <el-tag v-for="(tag, index) in scope.row.tagNames" :key="index" class="tagInfo">{{ tag }}</el-tag>
                </div>
              </template>
            </template>
          </el-table-column>
          <el-table-column :prop="item.prop" :label="item.label" align="center" v-else-if="item.label == '联系电话'"
            :width="180">
            <template slot-scope="scope">
              <span @click="findNumber(scope.row, 'phone')" class="findClick">{{
                scope.row.phone
              }}</span>
            </template>
          </el-table-column>
          <el-table-column :prop="item.prop" :label="item.label" align="center" v-else-if="item.label == '微信号'">
            <template slot-scope="scope">
              <span @click="findNumber(scope.row, 'wechatNo')" class="findClick">{{ scope.row.wechatNo }}</span>
            </template>
          </el-table-column>
          <el-table-column width="120" :prop="item.prop" :label="item.label" align="center"
            v-else-if="item.label == '客户状态'">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.customerState">{{
                scope.row.customerState
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column :prop="item.prop" :label="item.label" align="center" v-else :width="160" show-overflow-tooltip></el-table-column>
        </div>
        <el-table-column prop="createTime" label="操作" width="130" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button @click="handleFollowClick(scope.row)" type="text" size="small"
              v-hasPermi="['myCustomer:follow']">跟进
            </el-button>
            <el-button @click="handleClick(scope.row)" type="text" size="small" v-hasPermi="['myCustomer:details']">详情
            </el-button>
          </template>
        </el-table-column>
        <el-table-column width="35" fixed="right">
          <template slot="header">
            <i class="el-icon-setting" @click="openShowList"></i>
          </template>
        </el-table-column>
      </el-table>
      <NormalPagination :currentPage="message.pageNum" :pageSize="message.pageSize" :total="total"
        @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
    </div>
    <el-dialog title="选择需要展示的数据项" :visible.sync="dialogFormVisible">
      <showData @sendDataList="getDataList" ref="showDataList"></showData>
    </el-dialog>
    <el-dialog title="添加客户" :visible.sync="dialogCreatedVisible" width="520px">
      <createdCustomer @closeCreatedDialog="closeCreatedDialog" @sendCreateMessage="getCreateMessage" ref="createdCustomer" :isMyCus="true"></createdCustomer>
    </el-dialog>
    <!-- 导入客户 -->
    <ImportCustomer :visible.sync="importVisible" :isMyCustomer="1" />
    <!-- 筛选侧边栏 -->
    <el-drawer title="筛选" :visible.sync="dialogLeft" direction="ltr" custom-class="demo-drawer" size="320px">
      <screenList ref="screenList" @sendScreenMessage="getScreenList" @sendKeepList="getKeepList"></screenList>
    </el-drawer>
    <!-- 转派客户 -->
    <Reassignment :visible.sync="importReassignment" ref="reassignment" :toAssign="toAssign" />
    <!-- 跟进 -->
    <FollowInfoVue ref="followInfo" />
  </div>
</template>

<script>
import SearchCriteria from "../components/searchCriteria.vue";
import showData from "../components/showData.vue";
import createdCustomer from "../components/createdCustomer.vue";
import screenList from "../components/screenList.vue";
import ImportCustomer from "./components/ImportCustomer.vue";
import Reassignment from "./components/Reassignment";
import FollowInfoVue from "./followInfo.vue";
import {
  allCustomerAdd,
  findNumber,
  getAllCustomerInfo,
} from "@/api/customer/customerManage";

export default {
  name: "allCustomer",
  components: {
    showData,
    createdCustomer,
    screenList,
    ImportCustomer,
    Reassignment,
    FollowInfoVue,
    SearchCriteria,
  },
  data() {
    return {
      message: {
        pageNum: 1,
        pageSize: 20,
        sysUserId: null,
      },
      // 性别
      genderOptions: [],
      tableData: [],
      tableList: [],
      total: 100,
      dialogFormVisible: false,
      dialogCreatedVisible: false,
      dialogLeft: false,
      tableSelectList: [],
      inputTag: "",
      loadingrefresh: false,
      // 导入客户
      importVisible: false,
      // 转派客户
      importReassignment: false,
      isAssignDisable: true,
      toAssign: null,
      dictOptions: [
        { dict: "follow_states", list: [], label: "followStage" },
        { dict: "marital", list: [], label: "marital" },
        { dict: "education", list: [], label: "education" },
        { dict: "job_type", list: [], label: "job" },
        { dict: "nationality", list: [], label: "nationality" },
        { dict: "friend_status", list: [], label: "friendStatus" },
        { dict: "customer_grade", list: [], label: "customerGrade" },
        { dict: "is_bind_wechat", list: [], label: "isBindWechat" },
        { dict: "distribution_state", list: [], label: "distributionState" },
        { dict: "wecom_add_state", list: [], label: "wecomAddState" },
        { dict: "customer_state", list: [], label: "customerState" },
      ],
    };
  },
  created() {
    this.message.sysUserId = this.$store.state.user.userId;
    this.getDictOptions();
  },
  mounted() {
    this.getDicts("gender").then((res) => {
      if (res.code === 200) {
        this.genderOptions = res.data;
      }
    });
    this.$refs.child.search();
    this.getDataList();
  },
  methods: {
    handleSizeChange(val) {
      this.message.pageNum = 1;
      this.message.pageSize = val;
      this.getList()
    },
    handleCurrentChange(val) {
      this.message.pageNum = val;
      this.getList()
    },
    // 获取我的客户
    getInfo(params) {
      this.loadingrefresh = true;
      getAllCustomerInfo(params)
        .then((res) => {
          if (res.code === 200) {
            res.rows.forEach((element) => {
              element.gender = this.selectDictLabel(
                this.genderOptions,
                element.gender
              );
              // let str = element.tagNames;
              // element.tagNames = str?.replace(",", "");
              this.dictOptions.forEach((item) => {
                element[item.label] = this.selectDictLabel(
                  item.list,
                  element[item.label]
                );
              });
            });
            this.tableData = res.rows;
            this.total = res.total;
            this.loadingrefresh = false;
          }
        })
        .catch(() => {
          this.loadingrefresh = false;
        });
    },
    getDictOptions() {
      this.dictOptions.forEach((item) => {
        this.getDicts(item.dict).then((res) => {
          if (res.code === 200) {
            item.list = res.data;
          }
        });
      });
    },
    // 接收侧边筛选
    getScreenList(value) {
      const params = {
        ...this.message,
        pageType: "6",
        ...value,
      };
      this.getInfo(params);
    },
    getList() {
      this.$refs.child.search();
    },
    getMessage(value) {
      const params = {
        ...this.message,
        pageType: "6",
        ...value,
      };
      this.getInfo(params);
    },
    handleSelectionChange(value) {
      this.tableSelectList = value;
      //转派按钮置灰
      if (value.length == 1 && value[0].sysUserId) {
        this.isAssignDisable = false;
      } else {
        this.isAssignDisable = true;
      }
    },
    // 展示数据项
    openShowList() {
      this.dialogFormVisible = true;
      setTimeout(() => {
        this.$refs.showDataList.getLabelList();
      }, 100);
    },
    getDataList() {
      this.dialogFormVisible = false;
      const siftList = JSON.parse(sessionStorage.getItem("siftList"));
      if (siftList) {
        this.tableList = siftList;
        // 在数据更新后执行
        this.$nextTick(() => {
          if (this.$refs.mainTable && this.$refs.mainTable.doLayout) {
            this.$refs.mainTable.doLayout();
          }
        });
      }
    },
    closeCreatedDialog() {
      this.dialogCreatedVisible = false;
    },
    getCreateMessage(value) {
      this.dialogCreatedVisible = false;
      if (value) {
        value["sysUserId"] = this.message.sysUserId;
        // 新建接口请求
        allCustomerAdd(value).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: "添加成功",
              type: "success",
            });
            this.$refs.child.search();
          }
        }).catch(() => {
          console.log("error submit!!");
        });
      }
      this.$refs.createdCustomer.resetForm();
    },
    // 详情
    handleClick(rows) {
      this.$router.push({
        path: "customerDetails",
        query: {
          sid: rows.sid,
          customerType: "1",
        },
      });
    },
    // 转派
    openReassignment() {
      const params = {
        sid: this.tableSelectList[0].sid,
      };
      this.toAssign = params;
      this.$refs.reassignment.openReassignmentVisible();
    },
    // 跟进
    handleFollowClick(row) {
      this.$refs.followInfo.openDialog(row);
    },
    // 侧边栏筛选
    openDialogLeft() {
      this.dialogLeft = true;
    },
    closeDialogLeft() {
      this.dialogLeft = false;
    },
    getKeepList() {
      // 接收侧边栏保存
      this.closeDialogLeft();
      this.$refs.child.getLabelList();
    },
    //点击获取手机号微信号
    findNumber(row, type) {
      const params = {
        sid: row.sid,
      };
      findNumber(params)
        .then((res) => {
          if (res.code === 200) {
            // console.log(res);
            this.tableData.some((item) => {
              if (item.sid == res.data.sid) {
                // console.log(item);
                if (type === "phone") {
                  item.phone = res.data.phone;
                } else if (type === "wechatNo") {
                  item.wechatNo = res.data.wechatNo;
                }
              }
            });
          }
        })
        .catch(() => {
          console.log("error");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../styles/element-ui.scss";
@import "@/styles/base.scss";

.myCustomer {
  .title {
    font-size: 20px;
  }

  .g-pad20 {
    display: flex;
    justify-content: space-between;
  }

  .search {
    display: flex;
    padding: 10px 20px 10px;
    flex-wrap: wrap;
    justify-content: space-between;

    .demo-input {
      width: 22%;
      display: flex;
      align-items: center;
      margin: 5px 30px 10px 0;

      .el-input {
        margin-left: 20px;
        flex: 1;
      }

      span {
        margin-left: 20px;
      }

      .el-select {
        width: 100%;
        flex: 1;
        margin-left: 20px;
      }
    }
  }

  .header-search-select {
    width: 152px;
  }

  .main {
    background: #fff;
    padding: 0 20px 20px 20px;
    margin-top: 10px;

    .top {
      padding: 20px 0;
      display: flex;
      justify-content: space-between;

      .daoru {
        margin: 0 3px;
      }

      .el-checkbox {
        margin: 0 10px;
      }
    }
  }

  .shuai {
    font-size: 15px;
  }

  .import-template {
    color: rgba(15, 64, 245, 1);
    text-decoration: underline;
    cursor: pointer;
    margin-bottom: 30px;
    display: inline-block;
  }

  .tag_content {
    margin-top: 20px;
    margin-left: 20px;

    .input {
      display: flex;
      margin-right: 100px;
      align-items: center;

      .el-input {
        flex: 1;
        margin-left: 10px;
      }
    }

    .text {
      margin-right: 100px;
      margin-top: 10px;
      text-align: right;
      color: #082aff;
    }
  }

  .el-tag.el-tag--success {
    background-color: #e6f9ef !important;
    border-color: #cdf3df !important;
    color: #06c160 !important;
  }

  .el-tag.el-tag--warning {
    background-color: #fdedee !important;
    border-color: #fadcde !important;
    color: #f5881d !important;
  }

  .el-tag.el-tag--danger {
    background-color: #fdedee !important;
    border-color: #fadcde !important;
    color: #ed360d !important;
  }

  .wecomAdd1 {
    color: #666666;
  }

  .wecomAdd2 {
    color: #082aff;
  }

  .wecomAdd3 {
    color: #cccccc;
  }

  .el-button--info:hover {
    border-color: #c5b5b5;
  }
}

.tagInfo {
  margin: 2px 0px;
}

::v-deep {
  .el-drawer__header {
    font-size: 16px;
    color: rgba(16, 16, 16, 1);
  }

  .demo-drawer {
    top: 60px;
  }

  .el-checkbox__label {
    width: 100%;
  }
}

.set-popper {
  max-width: 431px;
}

.set-content {
  cursor: default;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>
